<template>
	<view class="calendar-box">
		<view class="top">
			<view>
				<view class="title">
					<h4>已连续签到 <span> {{lastSigned.seriesDays}} </span> 天</h4>
					<!-- <text class="left">您有<text class="left-count">{{integralSetting.leftReSignCount}}</text>次补签机会</text> -->
				</view>
				<!-- <p v-if="(lastSigned.seriesDays==6 && !signed) ||( signed && lastSigned.seriesDays==7)">
					今日签到可获得+{{integralSetting.signMax}}积分</p>
				<p v-else>今日可获得+{{integralSetting.todaySign}}积分</p> -->
				<p>今日可获得+{{integralSetting.todaySign}}积分</p>
				<text class="tips">每日签到至少可获得<span>{{integralSetting.todaySign}}</span>积分，连续签到7天可以获得<span>{{integralSetting.sevenIntegral}}</span>积分</text>
			</view>
			<!-- <view class="rig">
				<span>补签</span>
			</view> -->
		</view>
		<view class="miss_box">
			<view class="month">
				<view @click="lastMonth">上月</view>
				<view>{{year}}年{{month}}月</view>
				<view @click="nextMonth">下月</view>
				<picker v-if="checkDate" class="picker" mode="date" fields="month" @change="changeDate" />
			</view>
			<view class="week">
				<view :style="'color:'+(weeks==weeked?bgweek:'')+';'" v-for="weeks in weekArr" :key="weeks">{{weeks}}
				</view>
			</view>
			<view class="day">
				<view :class="[{'checkday':days.date==''},{'choose':days.date==localDate }]"
					:style="'background:'+(days.date==localDate ? bgday:'')+';'" v-for="(days,index) in dayArr"
					:key="index" @click="signToday(days,index)">
					{{days.day}}
					<view :class="[{'circle':days.flag},{'repair':days.day<day},{'sign':days.day==day}]"></view>
				</view>
			</view>
		</view>
		<view class="but">
			<button :disabled='((thisMonth == month) && !signed) ? false : true'
				:style="'background:'+((thisMonth == month) && !signed ? bgday : '#999')+';'"
				@click="daySign(dayArr[aheadDay + day - 1])">签到</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			lang: {
				type: String,
				default: 'zh'
			},
			type: {
				type: String,
				default: 'calendar2'
			},
			checkDate: {
				type: Boolean,
				default: false
			},
			bgweek: {
				type: String,
				default: '#12ae85'
			},
			bgday: {
				type: String,
				default: '#12ae85'
			}
		},
		data() {
			return {
				weeked: '', // 今天周几
				dayArr: [], // 当前月每日
				localDate: '', // 今天日期
				day: new Date().getDate(), // 当前日
				year: new Date().getFullYear(), // 当前年
				month: new Date().getMonth() + 1, // 当前月
				weekArr: ['日', '一', '二', '三', '四', '五', '六'], // 每周
				aheadDay: 0, // 前方空白天数数量
				thisMonth: new Date().getMonth() + 1,
				signed: false, //今天是否已签到
				lastSigned: {
					seriesDays: 0
				},
				integralSetting: {},
			}
		},
		mounted() {
			let that = this;
			// 初始日期
			that.initDate();
			// 今天日期
			that.localDate = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(that.day);
			// 中英切换
			if (that.lang != 'zh') that.weekArr = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
			// 今天周几
			that.weeked = that.weekArr[new Date().getDay()];
		},

		onLoad() {
			this.getSignIntegral();
			this.getLastSign();
		},

		methods: {
			// 选择年月
			changeDate(e) {
				let that = this;
				that.year = parseInt(e.detail.value.split('-')[0]);
				that.month = parseInt(e.detail.value.split('-')[1]);
				that.initDate();
			},
			// 今日签到
			async daySign(obj) {
				let res = await this.$apis.sign({});
				if (res) {
					// 今天日期加上前方空白日期数量
					let index = this.aheadDay + this.day - 1
					this.$set(this.dayArr[index], 'flag', true);
					uni.showToast({
						title: '已签到',
						icon: 'success'
					});
					this.getDates();
					this.getLastSign();
				}
			},

			async getDates() {
				let startDate = this.dayArr[0].date;
				let data = await this.$apis.getSignedList({
					startDate: startDate
				});
				if (data.length > 0) {
					data.forEach(item => {
						this.dayArr.forEach(item2 => {
							if (item.signDate === item2.date) {
								this.$set(item2, 'flag', true);
							}
							if (this.localDate == item.signDate) {
								this.signed = true;
							}
						});
					});
				}
			},

			async getSignIntegral() {
				let res = await this.$apis.getSignIntegral();
				console.log("===getSignIntegral===",res);
				if (res) {
					this.integralSetting = res;
				}
			},

			async getLastSign() {
				let res = await this.$apis.getLastSign();
				console.log("===getLastSign===",res);
				if (res.length > 0) {
					this.lastSigned = res[0];
				} else {
					this.lastSigned.seriesDays = 0;
				}
			},

			// 点击补签
			signToday(obj, index) {
				let that = this;
				// 指定签到类型可访问
				if (that.type == 'calendar') return;
				// 限制本月可进行签到
				if ((new Date().getMonth() + 1) != parseInt(obj.date.split('-')[1])) return;
				// 禁用非本月点击签到且限制签到日期小于本日
				if (obj.date != '' && obj.day < that.day) {
					// 开启已签到提醒
					if (that.dayArr[index].flag) {
						uni.showToast({
							title: '已签到',
							icon: 'none'
						});
					} else {
						return;//暂不支持补签
						if (that.integralSetting.leftReSignCount <= 0) {
							uni.showToast({
								title: '暂无补签机会',
								icon: 'none'
							});
							return;
						}
						//补签需要提示
						uni.showModal({
							title: '补签提示',
							content: '确定对当前日期进行补签？',
							success: function(res) {
								if (res.confirm) {
									that.reSign(obj.date, index);
								} else if (res.cancel) {

								}
							}
						})
					}
				}
			},
			async reSign(date, index) {
				// let res = await Api.apiCall('post', Api.sign.reSign, {
				// 	signDate: date
				// });
				// if (res) {
				// 	this.$set(this.dayArr[index], 'flag', true);
				// 	uni.showToast({
				// 		title: '补签成功',
				// 		icon: 'success'
				// 	});
				// 	this.getDates();
				// 	this.getLastSign();
				// 	this.getSignIntegral();
				// }
			},
			// 初始化日期
			initDate() {
				let that = this;
				that.dayArr = [];
				// 当前月总天数
				let totalDay = new Date(that.year, that.month, 0).getDate();
				// 遍历总天数将日期逐个添加至数组
				for (let i = 1; i <= totalDay; i++) {
					// 得到需补充天数
					let value = (new Date(that.year, that.month - 1, i)).getDay();
					// 补充前面空白日期
					if (i == 1 && value != 0) {
						that.addBefore(value);
						that.aheadDay = value;
					}
					// 添加本月日期
					let obj = {};
					obj.date = that.year + '-' + that.formatNum(that.month) + '-' + that.formatNum(i);
					obj.day = i;
					that.dayArr.push(obj);
					// 补充后面空白日期
					if (i == totalDay && value != 6) that.addAfter(value);
				}
				// 签到功能
				if (that.type != 'calendar') {
					for (let i in that.dayArr) {
						that.$set(that.dayArr[i], 'flag', false);
					}
				}
				this.getDates();
			},

			// 补充前面空白日期
			addBefore(value) {
				let that = this;
				let totalDay = new Date(that.year, that.month - 1, 0).getDate();
				let mYear, mMonth;
				if (this.month == 1) {
					mYear = this.year - 1;
					mMonth = 12;
				} else {
					mYear = this.year;
					mMonth = this.month - 1;
				}
				for (let i = 0; i < value; i++) {
					let obj = {};
					// obj.date = '';
					obj.date = mYear + '-' + that.formatNum(mMonth) + '-' + that.formatNum(totalDay - (value - i) + 1);
					obj.day = totalDay - (value - i) + 1;
					that.dayArr.push(obj);
				}
			},
			// 补充后空白日期
			addAfter(value) {
				let that = this;
				for (let i = 0; i < (6 - value); i++) {
					let obj = {};
					obj.date = '';
					obj.day = i + 1;
					that.dayArr.push(obj);
				}
			},
			// 格式化日期位数
			formatNum(num) {
				return num < 10 ? ('0' + num) : num;
			},
			// 上一个月
			lastMonth() {
				let that = this;
				if (that.month == 1) {
					that.year -= 1;
					that.month = 12;
				} else {
					that.month -= 1;
				}
				that.initDate();
			},
			// 下一个月
			nextMonth() {
				let that = this;
				if (that.month == 12) {
					that.year += 1;
					that.month = 1;
				} else {
					that.month += 1;
				}
				that.initDate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.calendar-box {
		width: 100%;
		flex-direction: column;
		justify-content: center;
	}

	.miss_box {
		width: 100%;
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 25rpx;
	}

	.calendar-box,
	.month,
	.week,
	.day {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.month,
	.week,
	.day {
		width: 100%;
	}

	.month {
		margin: 10rpx 0 30upx 0;
		position: relative;
		background-color: #eee;
		padding: 20upx;
		border-radius: 15upx;
	}

	.picker {
		width: 160rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.day {
		flex-wrap: wrap;
	}

	.week>view,
	.day>view {
		width: 70rpx;
		height: 70rpx;
		margin: 10rpx;
		text-align: center;
		position: relative;
		line-height: 70rpx;
	}

	.checkday {
		color: #999;
	}

	.choose {
		color: #FFFFFF;
		border-radius: 50%;
	}

	.circle {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
		position: absolute;
		bottom: -5upx;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.sign {
		background-color: #FFF;
	}

	.repair {
		background-color: #4AA849;
	}

	.but {
		display: flex;
		flex: 1;
		margin-top: 40rpx;
		justify-content: center;
	}

	.but button {
		width: 650rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 30rpx;
		border: 1px solid transparent;
		outline: none;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	uni-button:after {
		border: none;
	}

	.top {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		align-items: center;
	}

	.tips {
		color: #999;
		font-size: 26upx;
	}
	
	.tips span {
		color: #FF871E;
		margin: 0 10rpx;
		font-size: 32rpx
	}

	.title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.left {
		font-size: 28upx;
	}

	.left-count {
		color: #FF871E;
		font-size: 30upx;
		font-weight: bold;
		padding: 0 5upx;
	}

	.top h4 {
		font-weight: 600;
		font-size: 36rpx;
		line-height: 50rpx;
	}

	.top h4 span {
		color: #FF871E;
		margin: 0 10rpx;
		font-size: 32rpx
	}

	.top p {
		font-style: normal;
		font-weight: normal;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #FF871E;
	}

	.rig span {
		font-style: normal;
		font-weight: normal;
		font-size: 24rpx;
		line-height: 48rpx;
		color: #FF871E;
		border: 1px solid #FF871E;
		padding: 10rpx 20rpx;
		border-radius: 32rpx;
	}
</style>
